<template>
    <el-dialog v-model="dialogVisible" :title="title" width="500">
        <!-- 表单 -->
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
            <el-form-item label="部门名称" prop="mingcheng">
                <el-input v-model="ruleForm.mingcheng" />
            </el-form-item>
            <el-form-item label="部门排序" prop="paixu">
                <el-input v-model="ruleForm.paixu" />
            </el-form-item>
            <el-form-item label="部门状态" prop="zhuangtai">
                <el-select v-model="ruleForm.zhuangtai" placeholder="请选择状态">
                    <el-option label="正常" :value="true" />
                    <el-option label="异常" :value="false" />
                </el-select>
            </el-form-item>
            <el-form-item label="创建时间" prop="shijian">
                <el-date-picker v-model="ruleForm.shijian" type="date" placeholder="请选择创建时间" format="YYYY/MM/DD"
                    value-format="x" />
            </el-form-item>
            <el-form - item label="所属部门" prop="parentId" v-if="ruleForm.parentId !== 0">
                <el-tree-select v-model="ruleForm.parentId" :data="treeData" :props="{ label: 'mingcheng' }"
                    node-key="id" default-expand-all check-strictly :render-after-expand="false" style="width: 240px" />
            </el-form>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    提交
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// 导入部门数据类型
import type { BuMenData } from '@/types';
// 定义变量
let dialogVisible = ref(false)
// 对话框标题
let title = ref('')
// 打开对话框的方法
const showTreeDialog = (row: BuMenData) => {
    if (row) {
        title.value = '编辑'
        ruleForm.value = { ...row }
    } else {
        title.value = '添加'
        ruleForm.value = {
            mingcheng: '',
            paixu: '',
            zhuangtai: '',
            shijian: '',
            parentId: ''
        }
    }
    // 打开对话框
    dialogVisible.value = true
}
// 暴露打开对话框的方法
defineExpose({ showTreeDialog })
// 接收BuMen.vue传递过来的完整的部门数据和方法
const props = defineProps(['treeData', 'getBumen'])

// 表单校验
import type { FormInstance, FormRules } from 'element-plus'

const ruleFormRef = ref<FormInstance>()
// 表单数据对象
const ruleForm = ref<BuMenData>({
    mingcheng: '',
    paixu: '',
    zhuangtai: '',
    shijian: '',
    parentId: ''
})
// 表单校验规则
const rules = ref<FormRules<BuMenData>>({
    mingcheng: [
        { required: true, message: '该项不能为空', trigger: 'blur' },
    ],
    paixu: [
        { required: true, message: '该项不能为空', trigger: 'blur' },
    ],
    zhuangtai: [
        { required: true, message: '该项不能为空', trigger: 'blur' },
    ],
    shijian: [
        { required: true, message: '该项不能为空', trigger: 'blur' },
    ],
    parentId: [
        { required: true, message: '该项不能为空', trigger: 'blur' },
    ]
})
// 导入添加、编辑API
import { addBumenAPI, updateBumenAPI } from '@/api/bumen';
import { ElMessage } from 'element-plus';
// 添加、编辑操作
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            if (ruleForm.value.id) {
                // 调用编辑API，完成编辑操作
                await updateBumenAPI(ruleForm.value.id, ruleForm.value)
                // 消息提示
                ElMessage.success('编辑成功')
            } else {
                // 调用添加API，完成添加操作
                await addBumenAPI(ruleForm.value)
                // 消息提示
                ElMessage.success('添加成功')
            }
            // 关闭对话框
            dialogVisible.value = false
            // 重新获取数据
            props.getBumen()
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

</script>

<style scoped></style>